<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { LiveApi, PassPort } from '@/apis/index'
import { useRoute } from 'vue-router'
import { decimalConversion } from '@/utils/DecimalConversionColor'
import decode from '@/types/makeBrotliDecode'
import { showToast, showSuccessToast, showFailToast,  showLoadingToast } from 'vant'
import eomData from '@/assets/data/eomData.js'
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

import type { ModuleLiveData } from '@/typings'
import type { Kvlist, LiveMsg, RechargGoods } from '@/TypingMore/LiveTyping'

import VideoPlayer from '@/components/livecomponents/VideoPlayer.vue'
import QrcodeVue from 'qrcode.vue'

interface LikeClick {
    like_icon: string
    like_text: string
    uid: number
    uname: string
    uname_color: string
}

const store = useCounterStore()

const { userInitial } = storeToRefs(store)

const route = useRoute()

const defaultLivelist = <ModuleLiveData>{}

const routeMsg = ref<ModuleLiveData>(defaultLivelist)

const kvlist = ref<Kvlist[]>([])

const RechargGoods = ref<RechargGoods[]>([])

const liveMsg = ref<LiveMsg[]>([])

const gifData = ref<any[]>([])

const likeInfoClick = ref<LikeClick>()

const remindMsg = ref('')

const message = ref('')

const timer = ref()

const livePlay = ref(false)

const enterLiveRoom = ref('')

const selfSendGif = ref('')

const bigSelfSendGif = ref('')

const show = ref(false)

const showPay = ref(false)

const showPopup = ref(false)

const showEom = ref(false)

const gifShow = ref(false)

const gifBigShow = ref(false)

const showLoading = ref(true)

const imgData = ref('')

const money = ref(0)

const priceDifference = ref(0)

const purchaseAmount = ref(6)

const paymentMethod = ref('微信支付')

const UlElent = ref<HTMLElement>()

const timerout = ref()

const passTimer = ref()

const num = ref(0)

const numValue = ref(true)

const qrCode123 = ref("hhhhhh, 可以做假支付了,感觉还不行加个密码支付吧，支付宝也行")

let ws = ref()

const videoOption = ref({
    autoplay: true,
    controls: true,
    sources: [
        {
            src: '',
            type: 'application/x-mpegURL'
        }
    ],
})
// 确认支付
const getPayment = (val: number) => {
    if (paymentMethod.value === '支付宝') {
        showPopupFun(val)
    } else {
        showSuccessToast({
            message: ' 充值成功！',
            className: 'color-toast',
            onClose: () => {
                showPay.value = false
                money.value = val * 10
            }
        })

    }
}
// 支付宝支付
const showPopupFun = (val: number) => {
    let count = 0
    showPopup.value = true;
    PassPort.getPassPortUrl().then(({ data }) => {
        console.log("**** PassPortUrl ****", data)
        qrCode123.value = data.data.url
        passTimer.value = setInterval(() => {
            PassPort.scanCodeOrNot(data.data.qrcode_key).then(({ data }) => {
                console.log(data.data.message, data.data)
                if (data.data.refresh_token !== '') {
                    showPopup.value = false
                    showSuccessToast({
                        message: ' 充值成功！',
                        className: 'color-toast',
                        onClose: () => {
                            showPay.value = false
                            money.value = val * 10
                        }
                    })
                    clearInterval(passTimer.value)
                } else if (data.data.message === '二维码已扫码未确认') {
                    count++
                    if (count >= 11) {
                        showFailToast(
                            {
                                message: '交易已关闭',
                                className: 'color-toast',
                                onClose: () => {
                                    showPopup.value = false
                                }
                            }
                        );
                        clearInterval(passTimer.value)
                    }
                }

            })
        }, 1500)
    })
}
let socket = null
// Σ(oﾟдﾟoﾉ) 无法找到该页面~
const getLiveM3u8Url = async () => {
    console.log(route.query.list)
    let list = route.query.list as string
    routeMsg.value = JSON.parse(list)
    if (route.query.list as string) {
        let { data } = await LiveApi.getLiveM3u8Data(JSON.parse(list).roomid)
        console.log(data)
        let urlData = data.data.playurl_info.playurl.stream[1].format[1].codec[0]
        videoOption.value.sources[0].src = urlData.url_info[0].host + urlData.base_url + urlData.url_info[0].extra
        console.log(data, videoOption.value.sources[0].src)
    }

}
// 获取当前最先展示的消息
const getLiveMsgData = async () => {
    let list = route.query.list as string
    let { data } = await LiveApi.getLiveMsg(JSON.parse(list).roomid)
    liveMsg.value = data.data.room
    console.log(data)
}
// 获取直播间的提醒消息
const getLiveRemindData = async () => {
    let { data } = await LiveApi.getLiveRemindMsg()
    kvlist.value = data.data.kv_list
    remindMsg.value = JSON.parse(JSON.parse(kvlist.value[0].value).civilized_notice).notice
    console.log('\n****  Kvlist ****\n', '这是提醒消息(data):', kvlist.value, remindMsg.value, '\n***** Kvlist  ******')
    // 不知道怎么解决socket.io 跨域的问题,然后直接换websocket写了, 没隔30秒需要发送一次那个好像是认证信息的东西，不然连接会断开
    connectToLiveBroadcast(routeMsg.value.roomid)
}
// 连接直播间接收消息
const connectToLiveBroadcast = (room_id: number) => {
    let eventTarget = new EventTarget();

    //事件注册, 这样子监听起来感觉高级哈哈哈, 方便知道是哪个类型的数据传递到了
    const on = (eventType: string, callback: (e: any) => void) => {
        eventTarget.addEventListener(eventType, (e: any) => {
            callback(e.detail);
        });
    }

    //生成认证数据
    const getCertification = (json: string) => {
        let encoder = new TextEncoder();    //编码器
        let jsonView = encoder.encode(json);    //utf-8编码
        let buff = new ArrayBuffer(jsonView.byteLength + 16);    //数据包总长度：16位头部长度+bytes长度
        let view = new DataView(buff);    //新建操作视窗
        view.setUint32(0, jsonView.byteLength + 16);    //整个数据包长度
        view.setUint16(4, 16);    //头部长度
        view.setUint16(6, 1);    //协议版本
        view.setUint32(8, 7);    //类型,7为加入房间认证
        view.setUint32(12, 1);    //填1
        for (let r = 0; r < jsonView.byteLength; r++) {
            view.setUint8(16 + r, jsonView[r]);    //填入数据
        }
        return buff;
    }

    // 处理发来的消息
    const handleMessage = (blob: any, call: (result: any) => void) => {
        let reader = new FileReader();
        reader.onload = (e: any) => {
            let buff = e.target.result;    //ArrayBuffer对象
            let decoder = new TextDecoder();    //解码器
            let view = new DataView(buff);    //视图
            let offset = 0;
            let packet: any = {};
            let result = [];
            while (offset < buff.byteLength) {    //数据提取
                let packetLen = view.getUint32(offset + 0);
                let headLen = view.getUint16(offset + 4);
                let packetVer = view.getUint16(offset + 6);
                let packetType = view.getUint32(offset + 8);
                let num = view.getUint32(12);
                if (packetVer == 3) {    //解压数据
                    let brArray = new Uint8Array(buff, offset + headLen, packetLen - headLen);
                    let BrotliDecode = decode.makeBrotliDecode();    //生成Brotli格式解压工具的实例
                    let buffFromBr = BrotliDecode(brArray);    //返回Int8Array视图
                    let view = new DataView(buffFromBr.buffer);
                    let offset_Ver3 = 0;
                    while (offset_Ver3 < buffFromBr.byteLength) {    //解压后数据提取
                        let packetLen = view.getUint32(offset_Ver3 + 0);
                        let headLen = view.getUint16(offset_Ver3 + 4);
                        let packetVer = view.getUint16(offset_Ver3 + 6);
                        let packetType = view.getUint32(offset_Ver3 + 8);
                        let num = view.getUint32(12);
                        packet.Len = packetLen;
                        packet.HeadLen = headLen;
                        packet.Ver = packetVer;
                        packet.Type = packetType;
                        packet.Num = num;
                        let dataArray = new Uint8Array(buffFromBr.buffer, offset_Ver3 + headLen, packetLen - headLen);
                        packet.body = decoder.decode(dataArray);    //utf-8格式数据解码，获得字符串
                        result.push(JSON.stringify(packet));    //数据打包后传入数组
                        offset_Ver3 += packetLen;
                    }
                } else {
                    packet.Len = packetLen;
                    packet.HeadLen = headLen;
                    packet.Ver = packetVer;
                    packet.Type = packetType;
                    packet.Num = num;
                    let dataArray = new Uint8Array(buff, offset + headLen, packetLen - headLen);
                    if (packetType == 3) {    //获取人气值
                        packet.body = (new DataView(buff, offset + headLen, packetLen - headLen)).getUint32(0);    //若入参为dataArray.buffer，会返回整段buff的视图，而不是截取后的视图
                    } else {
                        packet.body = decoder.decode(dataArray);    //utf-8格式数据解码，获得字符串
                    }
                    result.push(JSON.stringify(packet));    //数据打包后传入数组
                }
                offset += packetLen;
            }
            call(result);    //数据后续处理
        }
        reader.readAsArrayBuffer(blob);    //读取服务器传来的数据转换为ArrayBuffer
    }
    // 链接
    const webSocket = (room_id: number) => {

        ws.value = new WebSocket("wss://broadcastlv.chat.bilibili.com:2245/sub");

        ws.value.addEventListener('open', () => {
            console.log("连接成功啦");
            getGiftData()
            livePlay.value = true
            let certification = {
                "uid": 0,
                "roomid": room_id,
                "protover": 3,
                "platform": "web",
                "type": 2,
                "key": ""    //值为空字符串好像也没问题
            }
            ws.value.send(getCertification(JSON.stringify(certification)));
            console.log(JSON.stringify(certification))

            //没隔三十秒发一次验证，不然就断开连接了
            timer.value = setInterval(() => {
                let buff = new ArrayBuffer(16)
                let i = new DataView(buff)
                i.setUint32(0, 0)   //整个封包
                i.setUint16(4, 16)   //头部
                i.setUint16(6, 1)  //协议版本
                i.setUint32(8, 2)    //操作码,2为心跳包
                i.setUint32(12, 1)    //填1
                ws.value.send(buff)
            }, 30000)

        })
        // ENTRY_EFFECT 充钱玩家 
        // WATCHED_CHANGE 多少人看过
        ws.value.addEventListener('message', function (e: any) {
            //console.log(e.data);
            let blob = e.data
            // 信息来了之后就要做数据的转换了
            handleMessage(blob, function (result: any) {
                for (let i = 0; i < result.length; i++) {
                    let json = JSON.parse(result[i])
                    // console.log(JSON.parse(json.body))
                    // console.log(JSON.parse(json.body).cmd, JSON.parse(json.body))
                    if (json.Type == 5) {
                        let event = new CustomEvent(JSON.parse(json.body).cmd, { detail: JSON.parse(json.body) });
                        eventTarget.dispatchEvent(event);
                    }
                    if (json.Type == 8) {
                        let event = new CustomEvent("Certify_Success", { detail: JSON.parse(json.body) });
                        eventTarget.dispatchEvent(event);
                    }
                    if (json.Type == 3) {
                        let event = new CustomEvent("VIEW", { detail: json.body });
                        eventTarget.dispatchEvent(event);
                    }
                }
            });
        })

        ws.value.onclose = function () {
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
            if (timer.value != null) {
                clearInterval(timer.value);    //停止发送心跳包
                livePlay.value && setTimeout(webSocket, 4000);    //4秒后重连
            }

        }

        ws.value.onerror = function (e: any) {
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(e);
        }
    }

    //认证成功事件
    on("Certify_Success", function (e) {
        let data = e;
        if (data.code == 0) {
            console.log("Certify_Success");
        }
    })

    //人气值刷新事件
    on("VIEW", function (e) {
        let data = e;
        // console.log("VIEW: " + data.toString());
    })

    //弹幕事件
    on("DANMU_MSG", (e) => {
        let data = e;
        let uname = data.info[2][1];
        let uid = data.info[2][0];
        let extra = data.info[0][15]
        let shisan = data.info[0][13]
        // console.log(JSON.parse(extra.extra), 'emoticon:', shisan)
        let timedata = new Date(data.info[9].ts * 1000);
        let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
        let text = data.info[1];
        shisan === '{}' ? shisan = JSON.parse(shisan) : shisan
        let danmuMsg = {
            emoticon: shisan,
            nickname: uname,
            text,
            uid,
            uname_color: '#' + JSON.parse(extra.extra).color.toString(16),
        }

        liveMsg.value = [...liveMsg.value, danmuMsg]
        liveMsg.value = liveMsg.value.filter((item, index) => index !== 1)
        setScroll()
        // console.log(data.cmd + " " + uid + " " + time + " " + uname + " :" + text);
    })

    //好像也是弹幕
    on('DANMU_AGGREGATION', (e) => {
        // console.log(e, 'DANMU_AGGREGATION')
    })

    //礼物赠送事件
    on("SEND_GIFT", (e) => {
        let data = e;
        let uname = data.data.uname;
        let gift_num = data.data.num;
        let act = data.data.action;
        let gift_name = data.data.giftName;
        let timedata = new Date(data.data.timestamp * 1000);
        let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
        // console.log(data.cmd + " " + time + " " + uname + " :" + act + " " + gift_num + " " + gift_name);
        enterLiveRoom.value = uname + ' :' + gift_name + 'x' + gift_num
    })

    // 这是进入直播间了
    on("INTERACT_WORD", (e) => {
        let data = e;
        let uname = data.data.uname;
        let timedata = new Date(data.data.timestamp * 1000);
        let time = timedata.toLocaleDateString() + " " + timedata.toTimeString().split(" ")[0];
        if (data.data.msg_type == 2) {    //个人推测
            console.log(time + " " + uname + " 关注直播间");

        } else {
            // console.log(data.cmd + " " + time + " " + uname + " 进入直播间");
            enterLiveRoom.value = uname + " 进入直播间"
        }
    })

    // 给主播点了赞
    on("LIKE_INFO_V3_CLICK", (e) => {
        console.log(e)
        likeInfoClick.value = e.data
        enterLiveRoom.value = ` ${likeInfoClick.value?.uname} ${likeInfoClick.value?.like_text}<img width="20" height="20" src="${likeInfoClick.value?.like_icon}" />`
    })

    webSocket(room_id)

}
// 让消息一直处于下方位置
const setScroll = () => {
    if (UlElent.value) {
        UlElent.value.scrollTop = UlElent.value.scrollHeight - UlElent.value.offsetHeight
    }
}
// 获取礼物数据
const getGiftData = () => {
    LiveApi.getGiftConfig().then(async ({ data }) => {
        let { data: gift } = await LiveApi.getGitfDefaultData()
        let arr = data.data.list.filter(item => {
            for (let i = 0; i < gift.data.room_gift_list.gold_list.length; i++) {
                // console.log(item.id, gift.data.room_gift_list.gold_list[i].id)
                if (item.id === gift.data.room_gift_list.gold_list[i].id) {
                    return item
                }

            }
        })
        gifData.value = arr
        console.log(arr)
        console.log('**** gift *****', data, gift, '\n**** gift *****')
    })
}
// 发送礼物
const sendGif = (img: string, name: string, price: number, gifImg: string) => {
   if(imgData.value === '' || imgData.value === img) { 
    imgData.value = img
    if (money.value >= price / 100) {
        clearTimeout(timerout.value)
            num.value += 1
        
        money.value = money.value - (price / 100 * num.value)

        showLoading.value = false

        timerout.value = setTimeout(() => {
           if(price >= 1245000) {
            bigSelfSendGif.value = `<img src="${gifImg}"> ${name} x ${num.value} `
            gifBigShow.value = true
           } else {
            selfSendGif.value = `我投喂了:<img width="30" height="30" src="${img}"> ${name} x ${num.value} `
            gifShow.value = true
           }
           
            num.value = 0
            show.value = false
           
            showLoading.value = true
            imgData.value = '' 
        }, 2000);
    } else if (showLoading.value) {
        imgData.value = '' 
        showToast({
            message: '电池不足啦~',
            forbidClick: true,
            className: 'color-toast',
            onClose: () => {
                showLoadingToast({
                    message: '加载中...',
                    forbidClick: true,
                    className: 'color-toast',
                    onClose: () => {
                        showPay.value = true
                        LiveApi.getRechargeData().then(({ data }) => {
                            RechargGoods.value = data.data.goods
                            priceDifference.value = price / 100 - money.value
                            console.log(data, data.data.goods)
                        })
                    }
                })
            }
        })
 
    } else if (money.value < 0 || money.value < price / 100) {
            showToast({
                message: '电池不足啦~',
                forbidClick: true,
                className: 'color-toast',
            })
        } 
   }
}
//  礼物展示完毕 
const gifTransitionend = () => {
    let timer = null as any
    timer = setTimeout(() => {
        gifShow.value = false
        gifBigShow.value = false
        clearTimeout(timer)
    }, 1500)
}
// 获取表情
const getEomData = async () => {
    showEom.value = true
    console.log(eomData)
}
// 发送图片
const sendEomImg = (url: string, urlText: string) => {
    showEom.value = false
    // PassPort.getUserBaseData().then(({ data }) => {
    //     console.log(data)
    // })

    let obj = {
        emoticon: {
            bulge_display: '',
            emoticon_unique: '',
            height: 0,
            id: '',
            in_player_area: 0,
            is_dynamic: '',
            perm: 0,
            text: urlText,
            url,
            width: 0,
        },
        nickname: userInitial.value.data.uname,
        text: '',
        uid: userInitial.value.data.mid,
        uname_color: '',
    }

    liveMsg.value = [...liveMsg.value, obj]
    liveMsg.value = liveMsg.value.filter((item, index) => index !== 1)
}
// 发送消息
const sendMsg = () => {
    if (message.value) {
        let obj = {
            emoticon: {
                bulge_display: '',
                emoticon_unique: '',
                height: 0,
                id: '',
                in_player_area: 0,
                is_dynamic: '',
                perm: 0,
                text: '',
                url: '',
                width: 0,
            },
            nickname: userInitial.value.data.uname,
            text: message.value,
            uid: userInitial.value.data.mid,
            uname_color: '',
        }
        liveMsg.value = [...liveMsg.value, obj]
        liveMsg.value = liveMsg.value.filter((item, index) => index !== 1)
        message.value = ''
    }

}

watch(num, () => {
    numValue.value = false
})

watch(showPopup, (newVal) => {
    if (!newVal) {
        clearInterval(passTimer.value)
    }
})

onMounted(() => {
    localStorage.setItem('money', money.value.toString())
    if (localStorage.getItem('money')) {
        money.value = Number(localStorage.getItem('money'))
    }
    getLiveM3u8Url()
    getLiveMsgData()
    getLiveRemindData()
    // socket = io('wss://broadcastlv.chat.bilibili.com:2245/sub')
})

onBeforeUnmount(() => {
    livePlay.value = false
    if (ws.value.readyState === WebSocket.OPEN) {
        ws.value.close()
    }
    clearInterval(passTimer.value)
})
</script>

<template>
    <div class="bg-img relative pt-0 z-50" style="height: 100vh;">
        <div class=" flex items-center px-2 py-3 ">
            <img :src="routeMsg?.face" class=" w-10 h-10 rounded-full">
            <div class=" ml-2 text-xs text-white">
                <h2 class=" w-24 mb-1 whitespace-nowrap text-ellipsis overflow-hidden">{{ routeMsg?.uname }}</h2>
                <p>{{ routeMsg?.watched_show?.text_large }}</p>
            </div>
            <div>+ 关注</div>
        </div>

        <div :style="{ backgroundImage: `url(${routeMsg?.cover})` }" class="video-live relative">
            <img :src="routeMsg?.cover" alt="">
            <div class=" absolute top-0 left-0 w-full h-full">
                <VideoPlayer :options="videoOption" />
               
                <Transition name="gif-move" @after-enter="gifTransitionend">
                    <div v-html=" bigSelfSendGif" class=" flex items-end  absolute bottom-0 left-0 text-white" v-show="gifBigShow"></div>
                </Transition>
                <Transition name="gif-move" @after-enter="gifTransitionend">
                    <div v-html="selfSendGif" class=" flex  absolute bottom-0 left-0 text-white" v-show="gifShow"></div>
                </Transition>
            </div>
        </div>
        <ul class=" flex flex-col justify-start w-72 h-72 overflow-auto text-white " ref="UlElent">
            <li class="remind-color pt-2 px-2 pb-4 mb-1 rounded-md w-fit">{{ remindMsg }}</li>
            <li class=" py-2 px-2 mb-1 rounded-md w-fit "
                :style="{ backgroundColor: l.uname_color ? decimalConversion(l.uname_color) : 'rgba(0, 0, 0, .4)' }"
                v-for=" (l, index) in liveMsg" :key="(l.uid + index)">
                <span :style="{ color: l.uname_color }">{{ l.nickname }}: </span>
                <span>{{ l.emoticon.url ? '' : l.text }}</span>
                <img :src="l.emoticon.url ? l.emoticon.url : ''" class=" inline-block" width="50" height="50"
                    v-if="l.emoticon.url">
            </li>
        </ul>
        <div class=" flex items-center absolute bottom-12 left-0 text-white " v-html="enterLiveRoom"></div>
        <div class=" flex items-center absolute bottom-0 left-0 right-0 py-3 ">
            <van-cell-group inset class=" flex-1">
                <van-field style="height: 30px; padding: 2px 10px;" v-model="message" rows="1" autosize type="textarea"
                    placeholder="发个弹幕呗~" />
            </van-cell-group>
            <div @click="sendMsg" class=" text-white">发送</div>
            <div @click="getEomData"><img style="height: 30px; padding: 2px 10px;" src="@/assets/p2.png" alt=""></div>
            <div @click="show = true" style="height: 30px; padding: 2px 10px;"><img src="@/assets/p1.png"
                    class="w-full h-full" alt=""></div>
        </div>
        <van-action-sheet v-model:show="show" class="" style="background-color: #081623;">
            <div class="content flex flex-wrap relative h-64">
                <div class=" flex items-center absolute top-0 right-0 text-white py-2 px-4"><img src="@/assets/下载.png"
                        class=" w-4 h-4 mx-1" alt="">{{ money }}</div>
                <div class=" mt-3 flex flex-wrap relative ">
                    <div class=" flex flex-col items-center w-20 my-2" v-for="g in gifData " :key="g.id"
                        @click="sendGif(g.img_basic, g.name, g.price, g.gif)">
                        <img :src="g.img_basic" alt="" width="40" height="40">
                        <p class=" text-white">{{ g.name }}</p>
                    </div>
                </div>
                <van-action-sheet v-model:show="showPay" title="购买电池">
                    <div class="content pb-8">
                        <div>
                            <div class=" flex items-center">余额: <img src="@/assets/下载.png" class=" w-4 h-4 mx-1"
                                    alt="">{{ money }}</div>
                            <p class="text-xs mb-3">赠送该礼物，需要购买{{ priceDifference }}电池哦~</p>
                        </div>
                        <div class="flex flex-wrap justify-between">
                            <div style="width: 30%;" :class="{ 'purchase-amount': purchaseAmount === r.price / 1000 }"
                                class=" flex flex-col items-center py-1 m-1 bg-gray-100 " v-for="r in RechargGoods"
                                :key="r.id" @click="purchaseAmount = r.price / 1000">
                                <p class=" flex items-center"><img src="@/assets/下载.png" class=" w-3 h-4 mx-1" alt="">{{
                                        r.price / 100
                                }}</p>
                                <p class="text-xs">{{ '￥' + r.price / 1000 }}</p>
                            </div>
                        </div>
                        <div class=" text-center mt-6 py-2 bg-gray-100 "
                            :class="{ 'payment-method': paymentMethod === '支付宝' }" @click="paymentMethod = '支付宝'">支付宝
                        </div>
                        <div class="text-center my-3 py-2 bg-gray-100 "
                            :class="{ 'payment-method': paymentMethod === '微信支付' }" @click="paymentMethod = '微信支付'">微信支付
                        </div>

                        <div style="background: #f69;" class="text-center mt-5 py-2 text-white"
                            @click="getPayment(purchaseAmount)">
                            确认支付{{ '￥' +
                                    purchaseAmount
                            }}</div>
                    </div>
                </van-action-sheet>
            </div>
        </van-action-sheet>
        <van-action-sheet v-model:show="showEom" style="background-color: #081623;">
            <div class="content h-52 pb-8 flex flex-wrap">
                <div class=" w-16 m-2" v-for="e in eomData.data[0].emoticons" @click="sendEomImg(e.url, e.emoji)">
                    <img :src="e.url" alt="">
                </div>
            </div>
        </van-action-sheet>
        <van-popup v-model:show="showPopup" class=" rounded-lg">
            <div class=" flex flex-col items-center p-5 ">
                <div>
                    <p class=" text-center">电池充能~,请使用哔哩哔哩手机版扫码</p>
                    <p class=" text-center">支付金额<span class=" text-yellow-400">￥</span><span
                            class=" text-lg text-yellow-400">{{ purchaseAmount }}</span></p>
                </div>
                <QrcodeVue :value="qrCode123" size:600 style="width: 50vw; height: 50vw; margin: 5vw 0; "></QrcodeVue>
            </div>
        </van-popup>

    </div>
</template>

<style>
.remind-color {
    color: #fb7299;
}

.video-live {
    background-size: 100% 100%;
}

.content {
    padding: 16px 16px 60px;
}

.color-toast {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8vw;
    line-height: 1.3;
    border-radius: 3vw;
    color: #fff;
    background-color: #4a4a4b;
}

.bg-img {
    width: 100vw;
    height: 100vh;
    background-image: url(@/assets/b91b552eb12e1c65833fc802f1a5a28315496155.jpg@750w_1624h.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.purchase-amount {
    background-color: rgb(248, 182, 204);
    border: 1px solid #fb7299;
    color: #fb7299 !important;
}

.payment-method {
    color: #fff !important;
    background-color: #fb7299;
}

.gif-move-enter-from,
.gif-move-leave-to {
    transform: translateX(-100%);
}

.gif-move-enter-active,
.gif-move-leave-active {
    transition: all .5s linear;
}

.gif-move-enter-to,
.gif-move-leave-from {
    transform: translateX(0);
}
</style>
